import {createRouter, createWebHashHistory} from 'vue-router'
import {loader} from "../gloable/loader";

const home = () => import('/src/components/Index.vue')
const ProblemSet = () => import('/src/components/ProblemSet.vue')
const WorkSpace = () => import('/src/components/WorkSpace.vue')
const Editor = () => import('/src/components/Editor.vue')
const ArticleBrowser = () => import('/src/components/work/ArticleBrowser.vue')
const EditSolution = () => import('/src/components/work/EditSolution.vue')
const Login = () => import('/src/components/Login.vue')
const Space = () => import('/src/components/Space.vue')
const Record = () => import('/src/components/RecordDetail.vue')
const AnalyzerCenter = () => import('/src/components/AnalyzeCenter.vue')
const PeCenter = () => import('/src/components/PeCenter.vue')
const Manage = () => import('/src/components/Manage.vue')
const AskCenter = () => import('/src/components/AskCenter.vue')
const AskBrowser = () => import('/src/components/ask/AskBrowser.vue')
const ProblemManage = () => import('/src/components/manage/ProblemManage.vue')
const SolutionManage = () => import('/src/components/manage/SolutionManage.vue')
const AskManage = () => import('/src/components/manage/AskManage.vue')
const UserManage = () => import('/src/components/manage/UserManage.vue')


const routes = [
    {path: "/", redirect: "/home"},
    {
        path: "/space",
        name: "space",
        component: Space
    },
    {
        path: "/login",
        name: 'login',
        component: Login
    },
    {
        path: "/home",
        name: "home",
        component: home
    },
    {
        path: "/problems",
        name: "problems",
        component: ProblemSet
    },
    {
        path: "/work/:proId",
        name: "work",
        component: WorkSpace,
        children: [
            {
                path: '',
                name: 'work-editor',
                component: Editor
            },
            {
                path: 'article/:articleId',
                name: 'work-article',
                component: ArticleBrowser
            },
            {
                path: 'article/edit',
                name: 'work-article-edit',
                component: EditSolution
            }
        ]
    },
    {
        path: "/record/:recordId",
        name: "record",
        component: Record,
    },
    {
        path: "/analyze",
        name: "analyze",
        component: AnalyzerCenter,
    },
    {
        path: "/pe",
        name: "pe",
        component: PeCenter,
    },
    {
        path: "/ask",
        name: 'ask',
        component: AskCenter,
    },
    {
        path: '/ask/:aid',
        name: "ask-detail",
        component:AskBrowser
    },
    {
        path: '/manage',
        name: 'manage',
        component: Manage,
        children: [
            {
                path: 'problems',
                name: 'problem-manage',
                component: ProblemManage
            },
            {
                path: 'solutions',
                name: 'solution-manage',
                component: SolutionManage
            },
            {
                path: 'users',
                name: 'user-manage',
                component: UserManage
            },
            {
                path: 'asks',
                name: 'ask-manage',
                component: AskManage
            },
            {
                path: '',
                redirect: '/manage/problems'
            }
        ]
    }
]

const r = createRouter({
    history: createWebHashHistory(),
    routes: routes
})

r.beforeEach((to, from, next) => {
    if (to.name === 'work-editor') {
        loader.start()
        next();
    } else {
        next()
    }

})

export const router = r
